<template>
  <div class="main-content box-info">
    <div class="demo-image__placeholder info-left">
      <div class="block">
        <el-image :src="infos.cover"></el-image>
      </div>
    </div>
    <div class="info-right">
      <div class="info-item">课程名称:<div class="info-subitem">{{this.infos.title}}</div></div>
      <div class="info-item">课程价格:<div class="info-subitem">{{this.infos.price}}元</div></div>
      <div class="info-item">课程分类:<div class="info-subitem">{{this.infos.subjectLevel}}</div></div>
      <div class="info-item">讲师:<div class="info-subitem">{{this.infos.teacher}}</div></div>
      <div class="info-item">课时:<div class="info-subitem">共{{this.infos.lessonNum}}课时</div></div>
    </div>
  </div>
</template>

<script>
  import subject from "../../../../../api/subject";
  export default {
    name: "Two",
    beforeRouteLeave(to,form,next){
      this.$route.meta.success = true
      next()
    },
    mounted() {
      this.getSubjectInfo()
    },
    data(){
      return{
        infos:{
          id: '',
          title: '',
          cover: '',
          lessonNum: '',
          subjectLevel: '',
          teacher: '',
          price: 0,
        }
      }
    },
    methods: {
      getSubjectInfo(){
        subject.getPublishInfo(this.$store.state.subjectId)
        .then(resp => {
          // console.log(resp.data.publishInfo)
          this.infos = resp.data.publishInfo
        })
      }
    }
  }
</script>

<style scoped>
  .main-content{
    padding: 16px;
    margin-left: 12px;
    background: whitesmoke;
    border-radius: 8px;
  }
  .box-info{
    width: 900px;
    height: 400px;
  }
  .info-left{
    width: 400px;
    margin-top: 38px;
    padding: 12px;
    float: left;
    background: ghostwhite;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
  .info-right{
    width: 320px;
    height: 320px;
    margin-right: 80px;
    float: right;
  }
  .info-item{
    margin-top: 12px;
    padding: 15px;
    background: ghostwhite;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
  .info-subitem{
    display: inline;
    margin-left: 24px;
  }
</style>
